<template>
  <div class="choose-favor">
    <div class="box">
      <h3>请从以下电影类别中选择你感兴趣的电影</h3>
      <div class="checkBox">
        <!-- 渲染电影类别 -->
        <div
          v-for="(category, index) in dataList"
          :key="index"
          class="category"
        >
          <label>
            <!-- 复选框用于选择类别 -->
            <input
              type="checkbox"
              :value="category.type"
              v-model="selectedCategories"
            />
            {{ category.type }}
          </label>
          <div class="movies">
            <div
              class="item"
              v-for="(movie, index2) in category.movies"
              :key="index2"
            >
              <img :src="movie.imgSrc" alt="" />
              <span>{{ movie.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="chooseFinish" :disabled="!confirmAble"
      >{{ confirmAble ? "选择完毕，进入首页" : "至少选择一项"
      }}<i class="el-icon-arrow-right el-icon--right"></i
    ></el-button>
  </div>
</template>

<script>
import service from "@/utils/request";
export default {
  name: "ChooseFavor",
  data() {
    return {
      userInfo: {},
      dataList: [
        {
          type: "Animation,Fantasy,Adventure",
          movies: [
            {
              title: "《千与千寻》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.HPoCexsjmMISSgTi0Sl-RQHaKZ?w=208&h=292&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《指环王：王者归来》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.HKV0KfY-J6ARr9ekT_MSowAAAA?w=121&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《夺宝奇兵》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.-6l64eOoiII1JCYTCpuUvwAAAA?w=208&h=275&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
        {
          type: "Drama,Film-Noir,Thriller",
          movies: [
            {
              title: "《肖申克的救赎》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.17ZBKSpPYaSZZmi0puXFnQHaLn?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《双重赔偿》",
              imgSrc:
                "https://th.bing.com/th/id/OIP._KU33maK5LaoexjRHH-LUwAAAA?w=162&h=215&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《沉默的羔羊》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.we020DkRqMK7ylbzEHjV4AAAAA?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
        {
          type: "Western,War,Documentary",
          movies: [
            {
              title: "《黄金三镖客》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.MUlPjRD--fZUbVCa79XY5AHaFi?w=205&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《拯救大兵瑞恩》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.452szLWFRGo1bazcJUinMAHaKX?w=123&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《地球脉动",
              imgSrc:
                "https://th.bing.com/th/id/OIP.bqMh9uVbcvAbig-daXaf6wHaKY?w=129&h=181&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
        {
          type: "Romance,Mystery,Children's",
          movies: [
            {
              title: "《泰坦尼克号》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.hbQg0kASBpglKrANShxKVwHaKn?w=135&h=194&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《七宗罪》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.fV2QX8P8304F1aZ3cJWFEgHaKY?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《哈利·波特与魔法石》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.mQeSE6JejyYLcsODJqxE8AHaKY?w=208&h=292&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
        {
          type: "Action,Comedy,Sci-Fi",
          movies: [
            {
              title: "《终结者2:审判日》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.NhHVc6l05YigYPjH53CVXwHaKY?w=121&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《摩登时代》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.CygKhmV0Z6DWAUnZtRVeVAHaJD?w=142&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《银翼杀手2049》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.fwZ9VNqu2pWNQjyq1T4dEQHaKz?w=121&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
        {
          type: "Horror,Crime,Musical",
          movies: [
            {
              title: "《闪灵》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.bUS-xbphKah2OaCr4tY-7gAAAA?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《教父》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.i4NesF_O_vuFpM8s4J3sTQHaKY?w=134&h=188&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
            {
              title: "《音乐之声》",
              imgSrc:
                "https://th.bing.com/th/id/OIP.1t91rc_-sIfyoqK8cFETOQHaKZ?w=123&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
            },
          ],
        },
      ],
      selectedCategories: [], // 存储选中的类别
    };
  },
  computed: {
    confirmAble() {
      return this.selectedCategories.length > 0;
    },
  },
  methods: {
    // 可以根据需要添加处理选项的方法
    chooseFinish() {
      const result1 = this.selectedCategories.flat().join(",");
      //已经处理为字符串
      console.log(result1);
      const params = {
        genres: result1,
        userId: this.userInfo.userId,
      };
      service.get("user/choosePrefer", { params }).then((res) => {
        if (res.code == 200) {
          console.log("选择电影偏好成功");
          this.$router.push("/");
        } else {
          console.log("选择电影偏好失败");
        }
      });
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    // 初始化时，确保selectedCategories是一个空数组
  },
};
</script>

<style scoped lang="less">
.choose-favor {
  height: 100vh;
  width: 100%;
  background-color: #2d2a2a;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.el-button {
  position: relative;
  width: 10rem;
  top: 21.5rem; /* 向下偏移 20px */
  left: 8rem; /* 向右偏移 15px */
}

.box {
  width: 55%; /* 设置为外部容器的一半宽度 */

  h3 {
    margin-bottom: 1rem;
  }
  .checkBox {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    input[type="checkbox"] {
      transform: scale(1.8); /* 放大到原来的 1.5 倍 */
      vertical-align: middle; /* 垂直对齐 */
      margin-right: 8px; /* 给复选框和文本之间增加间距 */
      &:checked {
        background-color: #3c00ff; /* 选中时的背景色 */
        border-color: #4000ff; /* 选中时的边框颜色 */
      }
    }

    .category {
      display: block;
      border: 1px dashed #674f4f;
      border-radius: 1rem;
      padding: 0 0.5rem;
      font-size: 1.2rem;
      width: 45%;
      margin-bottom: 1rem;
      /* 选中偶数位的 .category 元素并添加左边距 */
      &:nth-child(even) {
        margin-left: 2rem; /* 这里可以调整左边距的值 */
      }
      .movies {
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          width: 30%;
          img {
            width: 100%;
            height: 9rem;
          }
          span {
            display: block;
            align-items: center;
            text-align: center;
            font-size: 0.8rem;
            line-height: 1.2rem; /* 设置行高，通常1.5倍字体大小 */
            height: 2.4rem; /* 2行文字的总高度，line-height * 2 */
            overflow: hidden; /* 防止溢出 */
          }
        }
      }
    }
  }
}
</style>
